<template>
    <div class="alonebox" @click="quzhuanji(myid)">
        <div class="alleft">
            <div class="alimg">
                <img v-lazy="mysrc" alt="">
            </div>
            <div class="alzj">
                <div class="alyuan">
                    <div class="alyuanzhong"></div>
                </div>
            </div>
        </div>
        <div class="alright">
            <div class="alname">
                {{myname}}
            </div>
            <div class="alduoshao">
                {{mynum}}首
            </div>
        </div>
    </div>    
</template>
<script>
export default {
    name:"alone",
    data(){
        return {

        }
    },
    props:['mysrc','myname','mynum','myid'],
    methods:{
        quzhuanji(){
            this.$router.push({path:'/album',query:{id:this.myid}})
        }
    }
}
</script>
<style lang="less" scoped>
.alonebox{
    width:100%;
    display:flex;
    padding:10px;
    margin:10px;
    .alleft{
        width:25%;
        position:relative;
        font-size:0px;
        display:flex;
        .alimg{
            width:100%;
            overflow: hidden;
            img{
                border-radius:8px;
                width:100%;
            }
        }
        .alzj{
            position:relative;
            height:100%;
            width:25px;
            overflow:hidden;
            .alyuan{
                width:50px;
                height:50px;
                border-radius:50%;
                background:black;
                position:absolute;
                top:50%;
                transform:translateY(-50%);
                right:10%;
                .alyuanzhong{
                    position:absolute;

                }
            }
        }
    }
    .alright{
        margin-left:20px;
        width:60%;
        .alname{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .alduoshao{
            margin-top:10px;
            font-size:14px;
            color:#777;
        }
    }
}
</style>